Pseudo-elements like ::before and ::after can be used inside flex or grid containers. They behave like regular child elements in terms of layout, so they participate in the flex or grid formatting context of their parent.

Key Points

1
Pseudo-elements are treated as children of the parent element in CSS layout, so flex and grid properties apply to them if they have display set to block, inline-block, or flex.
2
By default, ::before and ::after are inline elements, which may not participate in flex or grid alignment unless their display is changed.
3
You can position, size, and align pseudo-elements using standard flex and grid properties like justify-content, align-items, grid-column, or grid-row.
4
Pseudo-elements are ideal for adding decorative or structural content inside flex or grid items without adding extra HTML elements.

Example: Pseudo-Element in a Flex Container

In this example, each .item has a ::before pseudo-element displaying a star. The pseudo-element participates in the flex layout, maintaining spacing and alignment along with the other items.

Best Practices

1
Always define display for pseudo-elements to control their behavior in flex or grid layouts.
2
Use pseudo-elements for visual or decorative enhancements rather than functional content inside flex/grid items.
3
Combine with spacing, alignment, and positioning properties to integrate them seamlessly in the layout.
4
Test across different screen sizes and browsers to ensure consistent layout behavior.

Difficulty: 3/10

Topics: pseudo-elements, flexbox, grid layout

Scenario Questions

0-2 years experience

1
How would you add a small asterisk after a required form label using ::after, and make sure it aligns properly in a flex container?
2
What happens if you apply display: flex to a parent and try to use ::before to insert a badge — will it behave like a regular child?
3
If you set width: 100% on a ::before pseudo-element inside a grid cell, will it stretch to fill the whole cell?

2-5 years experience

1
A designer says the icon after a button isn’t aligning vertically — you’re using ::after with font-size and line-height, but it’s still off. What’s the most likely cause and how would you debug it?
2
You’re building a pill-shaped tag component using grid and ::before for a decorative dot, but the dot disappears on mobile. What could be breaking it, and how would you fix it without changing the HTML?
3
Why might a ::after element with content: '' not render at all in a flex layout even when you’ve set width and height?

5-8 years experience

1
You’re designing a reusable card component that uses ::before for a decorative border accent — how do you ensure it doesn’t break layout when the card content wraps or the container shrinks on small screens?
2
In a high-performance UI, you’re considering using pseudo-elements for visual indicators instead of extra DOM nodes. What tradeoffs would you weigh around render performance, accessibility, and maintainability?
3
A team is using ::after to inject tooltips in a grid-based dashboard, but the tooltips overflow and cause layout shifts. How would you redesign this to be robust across dynamic content and zoom levels?

8+ years experience

1
You’re leading a migration from legacy components that use inline spans for decorative elements to a pseudo-element-based system. What cross-team coordination, testing, and accessibility risks do you prioritize, and how do you measure success?
2
Your design system uses pseudo-elements for state indicators across hundreds of components. How do you architect this to avoid cascade conflicts, ensure consistent rendering across browsers, and support future theming without breaking existing layouts?
3
An audit reveals that pseudo-elements are being misused to inject semantic content in a large codebase. How do you enforce correct usage at scale, and what long-term architectural changes would you propose to prevent this from recurring?

Follow-up Questions

❓What happens if you try to use ::before on an img element?
❓Can you use flex properties like justify-content on a pseudo-element directly?
❓How does z-index behave on pseudo-elements compared to real children?